<template>
  <button @click="flag = !flag">switch</button>
  <transition
    appear
    appear-from-class="from"
    appear-to-class="to"
    appear-active-class="active"
  >
    <div class="box" v-if="flag"></div>
  </transition>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const flag = ref<boolean>(false)
</script>
<style lang="less" scoped>
.box{
  height: 200px;
  width: 200px;
  background-color: red;
}
.from{
  width: 0;
  height: 0;
}
.to{
  width: 200px;
  height: 200px;
  background-color: red;
}
.active{
  transition: all 2s ease;
}
</style>
